<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="guide">
        <span>合约列表</span>
      </p>
      <div class="d2">
        <div class="cl">
          <span class="left">总产出合计</span>
          <span class="right">{{myIncome}}BTC</span>
        </div>
        <div class="cl">
          <span class="left">有效算龄</span>
          <span class="right">{{powerTimenNow}}T*天</span>
        </div>
        <div class="cl">
          <span class="left">历史最高算龄</span>
          <span class="right">{{historyMax}}T*天</span>
        </div>
      </div>
      <div class="d3">
        <div>
          <p class="p1">BTC算力</p>
          <p class="list">
            <span>总算力 {{total_power}}T</span>
            <span class="noticeLog">
              <img src="../common/imgs/explain3.png" alt="" class="explain">
              <span class="minWin">
                <span class="top">
                <span>总算力</span>
                <span>{{total_power}}T = {{myPower.basePower}}T + {{accAddMore(myPower.floatPower , myPower.pePower ,myPower.futuresPower ,myPower.regularPower)}}T</span>
              </span>
                <span class="line">
                <span>
                  <span class="left">浮动算力</span>
                  <span class="right">{{myPower.floatPower}}T</span>
                </span>
                  <span>
                  <span class="left">达标算力</span>
                  <span class="right">{{myPower.pePower}}T</span>
                </span>
                  <span>
                  <span class="left">期货算力</span>
                  <span class="right">{{myPower.futuresPower}}T</span>
                </span>
                  <span>
                  <span class="left">定期算力</span>
                  <span class="right">{{myPower.regularPower}}T</span>
                </span>
              </span>
              </span>
            </span>
          </p>
          <p class="list">基础总算力 {{myPower.basePower}}T</p>
        </div>
        <div>
          <p class="p1">IPFS算力</p>
          <p class="list">总存力 {{ipfsAll.totalPower}}TB</p>
<!--          <p class="list">IPFS矿机台数 7台</p>-->
        </div>
      </div>
    </section>
    <section id="sec2">
      <div id="sec2Div">
        <div class="d1">
          <button :class="mcType === 0 ? 'active' : ''" @click="mcType=0">经典BTC算力</button>
          <button :class="mcType === 1 ? 'active' : ''" @click="mcType=1">加速产出BTC算力</button>
          <button :class="mcType === 2 ? 'active' : ''" @click="mcType=2">IPFS</button>
        </div>
      </div>
      <div class="mcStyles">
        <div v-if="mcType === 0" class="types">
          <p>
            <span class="typeName">矿机类型:</span>
            <span class="type" :class="mcTypeParam.isBhpPos === 'ALL' ? 'active' : ''" @click="mcTypeParam.isBhpPos = 'ALL'">全部</span>
            <span class="type" :class="mcTypeParam.isBhpPos === 'PT' ? 'active' : ''" @click="mcTypeParam.isBhpPos = 'PT'">单挖</span>
            <span class="type" :class="mcTypeParam.isBhpPos === 'SW' ? 'active' : ''" @click="mcTypeParam.isBhpPos = 'SW'">双挖</span>
          </p>
          <p>
            <span class="typeName">合约状态:</span>
            <span class="type" :class="mcTypeParam.state === 'ALL' ? 'active' : ''" @click="mcTypeParam.state = 'ALL'">全部</span>
            <span class="type" :class="mcTypeParam.state === 'KW' ? 'active' : ''" @click="mcTypeParam.state = 'KW'">在挖</span>
            <span class="type" :class="mcTypeParam.state === 'DW' ? 'active' : ''" @click="mcTypeParam.state = 'DW'">待挖</span>
            <span class="type" :class="mcTypeParam.state === 'DQ' ? 'active' : ''" @click="mcTypeParam.state = 'DQ'">已到期</span>
            <span class="type" :class="mcTypeParam.state === 'JJDQ' ? 'active' : ''" @click="mcTypeParam.state = 'JJDQ'">即将到期</span>
            <span class="type" :class="mcTypeParam.state === 'TZ' ? 'active' : ''" @click="mcTypeParam.state = 'TZ'">已退单</span>
          </p>
          <p>
            <span class="typeName">锁定期限:</span>
            <span class="type" :class="mcTypeParam.regularDateNum === 'ALL' ? 'active' : ''" @click="mcTypeParam.regularDateNum = 'ALL'">全部</span>
            <span class="type" :class="mcTypeParam.regularDateNum === '30' ? 'active' : ''" @click="mcTypeParam.regularDateNum = '30'">30天</span>
            <span class="type" :class="mcTypeParam.regularDateNum === '90' ? 'active' : ''" @click="mcTypeParam.regularDateNum = '90'">90天</span>
            <span class="type" :class="mcTypeParam.regularDateNum === '180' ? 'active' : ''" @click="mcTypeParam.regularDateNum = '180'">180天</span>
          </p>
          <p>
            <span class="typeName">订单类型:</span>
            <span class="type" :class="mcTypeParam.state2 === 'ALL' ? 'active' : ''" @click="mcTypeParam.state2 = 'ALL'">全部</span>
            <span class="type" :class="mcTypeParam.state2 === 'P' ? 'active' : ''" @click="mcTypeParam.state2 = 'P'">购买</span>
            <span class="type" :class="mcTypeParam.state2 === 'S' ? 'active' : ''" @click="mcTypeParam.state2 = 'S'">承接</span>
          </p>
        </div>
        <div v-if="mcType === 1" class="types">
          <p>
            <span class="typeName">合约状态:</span>
            <span class="type" :class="mcTypeParam.state === 'ALL' ? 'active' : ''" @click="mcTypeParam.state = 'ALL'">全部</span>
            <span class="type" :class="mcTypeParam.state === 'KW' ? 'active' : ''" @click="mcTypeParam.state = 'KW'">在挖</span>
            <span class="type" :class="mcTypeParam.state === 'DW' ? 'active' : ''" @click="mcTypeParam.state = 'DW'">待挖</span>
            <span class="type" :class="mcTypeParam.state === 'DQ' ? 'active' : ''" @click="mcTypeParam.state = 'DQ'">已到期</span>
          </p>
          <p>
            <span class="typeName">电费包状态:</span>
            <span class="type" :class="mcTypeParam.electricendType === 0 ? 'active' : ''" @click="mcTypeParam.electricendType = 0">全部</span>
            <span class="type" :class="mcTypeParam.electricendType === -3 ? 'active' : ''" @click="mcTypeParam.electricendType = -3">未到期</span>
            <span class="type" :class="mcTypeParam.electricendType === -1 ? 'active' : ''" @click="mcTypeParam.electricendType = -1">已到期</span>
            <span class="type" :class="mcTypeParam.electricendType === -2 ? 'active' : ''" @click="mcTypeParam.electricendType = -2">即将到期</span>
          </p>
        </div>
      </div>
      <div id="sec3Div" v-if="mcType != 2">
        <div class="tableBox">
          <table class="table1" v-if="mcType === 0">
            <thead>
            <tr>
              <td>名称</td>
              <td>金额</td>
              <td>到手总算力</td>
              <td>合约期限</td>
              <td>合约状态</td>
              <td>开挖时间</td>
<!--              <td>到期时间</td>-->
              <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item , index) in list">
              <th><span>{{item.productName}}</span></th>
              <th>
                <span>{{item.state2 == 2 ? item.continueTotalDeposit : item.totalDeposit}}{{item.paymentCurrencyCode == 'BCNY' ? 'OTC余额' : item.paymentCurrencyCode}}</span>
              </th>
              <th>
                <span class="pointer" @mouseenter="showItem1(item , $event)" @mouseout="showWin1 = false">
                  {{item.handsPower}}T
                </span>
              </th>
              <th><span>{{item.regularDateNum}}天</span></th>
              <th><span>{{item.workText}}</span></th>
              <th><span>{{item.startTime}}</span></th>
<!--              <th><span>{{item.endTime}}</span></th>-->
              <th class="setting">
                <span class="pointer" v-if="item.dragStatus == 1 && item.flag.substring(1,2) != 1 && item.num > 0" @click="renewalOrder(item)">续单</span>
                <span class="pointer" @click="transferOrder(item)"
                      v-if="(item.type != 11 && item.type != 10 || item.paymentCurrencyCode != 'BHPC' || item.notReturn != 1) && item.label == 1 && item.num > 0">
                  转让
                </span>
                <router-link class="pointer" :to="{path : 'rechargeElectric' , query :{ orderId : item.orderId}}" v-if="item.type == 11">充值电费</router-link>
                <span class="hoverhand" v-if="item.is_return_label == 1 && item.num > 0" @click="returnOrder(item)">退单</span>
              </th>
            </tr>
            </tbody>
          </table>
          <table class="table1" v-if="mcType === 1">
            <thead>
            <tr>
              <td>名称</td>
              <td>金额</td>
              <td>到手总算力</td>
              <td>合约期限</td>
              <td>合约包剩余天数</td>
              <td>合约状态</td>
              <td>开挖时间</td>
              <td>下单时间</td>
              <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item , index) in list">
              <th>{{item.productName}}</th>
              <th>
                <span>{{item.state2 == 2 ? item.continueTotalDeposit : item.totalDeposit}}{{item.paymentCurrencyCode == 'BCNY' ? 'OTC余额' : item.paymentCurrencyCode}}</span>
              </th>
              <th>
                   <span class="pointer" @mouseenter="showItem1(item , $event)" @mouseout="showWin1 = false">
                     {{item.handsPower}}T
                   </span>
              </th>
              <th>{{item.create_time}} 至 {{item.settlement_time}}</th>
              <th><span>{{item.regularDateNum}}天</span></th>
              <th><span>{{item.workText}}</span></th>
              <th><span>{{item.startTime}}</span></th>
              <th><span>{{item.operateTime}}</span></th>
              <th class="setting">
                <router-link class="pointer" :to="{path : 'rechargeElectric' , query :{ orderId : item.orderId}}" v-if="item.type == 11 && item.state != 2">充值电费</router-link>
              </th>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="pagination" v-if="list.length > 0 ">
          <!--分页-->
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            layout="prev, pager, next, jumper"
            :page-count="totalNum">
          </el-pagination>
        </div>
        <div class="noData" v-if="list.length === 0">
          <img src="../common/imgs/billNull.png" alt="空">
          <p>暂无数据</p>
        </div>
      </div>
    </section>
    <!--展示普通算力包的算力信息-->
    <div class="abWin" v-if="showWin1" :style="win1Style">
      <span class="top">
        <span>总算力</span>
        <span>{{win1Data.totalPower}}T</span>
      </span>
      <span class="line">
        <span>
          <span class="left">基础算力</span>
          <span class="right">{{win1Data.basePower}}T</span>
        </span>
        <span>
          <span class="left">浮动算力</span>
          <span class="right">{{win1Data.floatPower}}T</span>
        </span>
        <span>
          <span class="left">达标算力</span>
          <span class="right">{{win1Data.standardPower}}T</span>
        </span>
        <span>
          <span class="left">期货算力</span>
          <span class="right">{{win1Data.futuresPower}}T</span>
        </span>
        <span>
          <span class="left">定期算力</span>
          <span class="right">{{win1Data.regularPower}}T</span>
        </span>
        <span>
          <span class="left">邀请算力</span>
          <span class="right">{{win1Data.invitePower}}T</span>
        </span>
      </span>
    </div>
  </div>
</template>
<script>
  import { myOrderList , myPower , ipfsPower , ipfsContract} from '../http/api';
  export default {
    name: 'cashWithdraw',
    inject: ['reload'],
    components:{
      //DatePicker :  require('element-ui').DatePicker, /*DatePicker*/
      ElPagination : require('element-ui').Pagination, /*ElPagination*/
    },
    data() {
      return {
        showWin1 : false,//显示弹窗1
        win1Data : {
          totalPower : 0,
          basePower : 0 ,
          floatPower : 0,
          standardPower : 0,
          futuresPower : 0,
          regularPower : 0,
          invitePower : 0,
        },//弹窗1数据
        win1Style : {left : 0 ,right : 0},//弹窗1位置
        mcType : 0,//选择的tabbar类型
        mcTypeParam : { //矿机类型大数组
          isBhpPos : 'ALL' , // ALL , PT , SW
          state : 'ALL' , // ALL 全部 KW开挖 DW 待挖   TZ 停租 DQ 已到期 JJDQ即将到期
          type :	'ALL',  //ALL 全部 P购买 G赠送
          regularDateNum : 'ALL' , // ALL 全部 30活期 90定三 180定六
          state2 : 'ALL' , //ALL 全部 P购买 S 承接
          not_return : 'ALL' , //ALL 全部 1不回购 0 可回购
          electricendType : 0 , // 电费时间类型查询 ；全部 0   1-过期； 2-即将到期（7天）； 3-没到期的
        },
        currentPage: 1,
        totalNum : 1,//总页数
        pageSize : 20,
        list :  [] , //列表
        total_power : 0 ,//总算力
        myPower :{},//顶部总算力的弹窗
        myIncome : '',//总产出
        powerTimenNow : '',//有效算领
        historyMax : '',//历史最高算领
        ipfsAll : { totalPower : ''},
        ipfsIframeUrl : null,
      }
    },
    watch:{
      'mcType'(type){
        if(type === 2){
          let url = this.ipfsIframeUrl;
          if( !url ){
            ipfsContract().then(res => {
              if(res.code == 200){
                 url = res.data.url;
                this.ipfsIframeUrl = url;
                window.location.href = url;
              }
            });
          }
          else {
            window.location.href = url;
          }
        }else{
          //矿机头部大类型变化，先初始化
          this.mcTypeParam = {
            isBhpPos : 'ALL' , // ALL , PT , SW
            state : 'ALL' , // ALL 全部 KW开挖 DW 待挖   TZ 停租 DQ 已到期 JJDQ即将到期
            type :	'ALL',  //ALL 全部 P购买 G赠送
            regularDateNum : 'ALL' , // ALL 全部 30活期 90定三 180定六
            state2 : 'ALL' , //ALL 全部 P购买 S 承接
            not_return : 'ALL' , //ALL 全部 1不回购 0 可回购
            electricendType : 0 , // 电费时间类型查询 ；全部 0   1-过期； 2-即将到期（7天）； 3-没到期的
          };
        }
      },
      machineParam(val){
        if(this.mcType != 2 ){
          this.loadMachineList();
        }
      }
    },
    computed:{
      machineParam(){
        //组装obj监听
        let mcTypeParam = this.mcTypeParam;
        return {
          isBhpPos: mcTypeParam.isBhpPos,
          state: mcTypeParam.state,
          type: mcTypeParam.type,
          regularDateNum: mcTypeParam.regularDateNum,
          state2: mcTypeParam.state2,
          not_return: mcTypeParam.not_return,
          electricendType: mcTypeParam.electricendType,
        }
      }
    },
    mounted() {
      let thiz = this;
      let https = [
        myPower({ noLoading : true}).then(res => {
          if( res.code == 200){
            let data = res.data;
            thiz.myIncome =  data.totalRevenue ? thiz.numSlice(data.totalRevenue, 8) : "--";
            thiz.powerTimenNow = data.powerTimeNow == 0 ? "0.00" : data.powerTimeNow;
            thiz.historyMax = Number(data.powerTimeYesterdayMax) > Number(data.powerTimeMax) ? data.powerTimeYesterdayMax : data.powerTimeMax;
            thiz.myPower = data;
            thiz.total_power = data.totalPower;
          }
        }),
        ipfsPower({noLoading : true}).then(res => {
          if( res.code == 200){
            let data = res.data;
            thiz.ipfsAll = {
              totalPower : data.ipfs.totalPower
            }
          }
        }),
        this.loadMachineList( true )
      ];
      this.PromiseAll(https);
    },
    methods:{
      loadMachineList( noLoading ){
        let thiz = this;
        let mcTypeParam = this.mcTypeParam ;
        let mcType = this.mcType;
        let postParam = {};
        if(mcType === 0){
          postParam = {
            isBhpPos: mcTypeParam.isBhpPos,
            state: mcTypeParam.state,
            type: mcTypeParam.type,
            regularDateNum: mcTypeParam.regularDateNum,
            state2: mcTypeParam.state2,
            // not_return: mcTypeParam.not_return,
            electricendType: mcTypeParam.electricendType,
            not_return : 0,
            page:thiz.currentPage,
          }
        } else {
          postParam = {
            type: mcTypeParam.state,
            electricendType: mcTypeParam.electricendType,
            not_return : 1,
          }
        }
        if (noLoading){
          postParam.noLoading = true;
        }
        return myOrderList(postParam).then(res => {
          if(res.code == 200){
            let data = res.data;
            thiz.totalNum = data.totalPage;
            let list = data.orderList;
            thiz.for(list , (item , index) => {
              item.handsPower = thiz.getPbHandPower(item).totalPower;
            });
            thiz.list = list;
          }
        });
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.loadMachineList();
      },
      getPbHandPower(item){
        //获取普通的合约包到手算力
        let win1Data = {
          //totalPower : this.accMoreMul(item.basePower , item.num),
          basePower :  this.accMoreMul(item.basePower , item.num), //基础算力
          floatPower : this.accMoreMul(item.floatPower, item.num),//浮动
          standardPower : 0,//达标
          futuresPower : this.accMoreMul(item.futuresPower, item.num),//期货
          regularPower : this.accMoreMul(item.regularPower, item.num),//定期
          invitePower : 0,//邀请
        };
        let result = 0 , thiz = this;
        this.for(win1Data , ( item , key ) => {
          result = thiz.accAddMore( result , item);
        });
        win1Data.totalPower = result;
        return win1Data;
      },
      showItem1(item , e ){
        let x = e.clientX;
        let y = e.clientY;
        this.win1Style = {left : x+20+'px' , top : y +'px'};
        this.win1Data = this.getPbHandPower(item);
        this.showWin1 = true;
      },
      renewalOrder(item){
        //去续单
        this.$router.push({ path : '/renewalOrder' , query :{orderId : item.orderId }});
      },
      transferOrder(item){
        //去转让
        this.$router.push({ path : '/transferOrder' , query :{orderId : item.orderId }});
      },
      returnOrder(item){
        //去退单
        this.$router.push({ path : '/returnOrder' , query :{orderId : item.orderId }});
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  table{
    table-layout:fixed;
  }
  .noticeLog{
    position: relative;display: inline-block;vertical-align: middle;
    >.explain{
      vertical-align: middle;width: 16px;height: 16px;
      &:hover{
        cursor: pointer;
        &+.minWin{
          display: block;z-index: 2;
        }
      }
    }
  }
  #sec1{
    >.d2{
      overflow: hidden;padding-top: 17px;
      >.cl{
        float: left;overflow: hidden;margin-left: 94px;
        &:first-child{
          margin-left: 0;
        }
        >span{
          float: left;
          &:first-child{
            display: inline-block;height: 35px;line-height: 35px;width: 104px;text-align: center;.border(#E8E7E7);.borderRadius;
          }
          &:last-child{
            color: #343434;height: 35px;display:inline-block;line-height: 35px;font-size: 16px;padding-left: 10px;
          }
        }
      }
    }
    >.d3{
      padding-top: 23px;height: 107px;
      >div{
        float: left;
        &:first-child{
          width: 570px;
        }
        >.p1{
          font-size: 20px;
        }
        >.list{
          color: #999;font-size: 16px;padding-top: 15px;
        }
      }
    }
  }
  #sec2,#sec3Div{
    margin-top: 14px;
  }
  #sec2{
    background: none;padding: 0;
    >.mcStyles{
      padding-left: 26px;background: #fff;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;
      >.types{
        padding-bottom: 20px;padding-top: 5px;
        >p{
          overflow: hidden;padding-top: 20px;
          >span{
            float: left;color: #595959;font-size: 14px;margin-left: 30px;display: inline-block;
            &.typeName{
              margin-left: 0;width: 92px;
            }
            &.type:nth-child(2){
              margin-left: 15px;
            }
            &.type:hover , &.active{
              cursor: pointer;.colorYellow;
            }
          }
        }
      }
    }
    >#sec2Div{
      background: #fff;
      >.d1{
        height: 68px;padding-left: 26px;border-bottom: 1px solid#E8E7E7;
        >button{
          float: left;height: 100%;position: relative;color: #999;font-size: 16px;background: none;margin-left: 68px;
          &:first-child{
            margin-left: 0;
          }
          &:hover{
            .colorYellow;
          }
          &.active{
            .colorYellow;
            &:after{
              content: '';display: inline-block;width: 100%;position: absolute;bottom: -1px;height: 2px;left: 0;.bgYellow;z-index: 1;
            }
          }
        }
      }
    }
    .noData{
      text-align: center;font-size: 0;padding: 50px 0;
      >img{
        width: 100px;
      }
      >p{
        color: #999;font-size: 14px;
      }
    }
    .pagination{
      text-align: right;padding: 36px 0;
      /deep/ input{
        width: auto;
        &.el-input__inner{
          width: 100%;
        }
      }
    }
  }
  #sec3Div{
    margin-top: 15px;padding: 15px 0;background: #fff;.borderRadius;padding-top: 0;
    >.tableBox{
      padding: 0 0px;
      >table{
        width: 100%;text-align: left;border-bottom: 1px solid#eee;
        thead>tr>td:first-child , tbody>tr>th:first-child{
          padding-left: 26px;
        }
        thead>tr>td:last-child , tbody>tr>th:last-child{
          padding-right: 26px;
        }
        th{
          font-weight: 500;font-size: 14px;color: #262626;
          >span{
            display: inline-block;height: 100%;
          }
        }
        >thead{
          color: #999999;font-size: 14px;
          tr>td{
            padding: 25px 0;
            &:last-child{
              text-align: right;
            }
          }
        }
        >tbody{
          th{
            border-top: 1px solid#eee;padding: 24px 6px;padding-top: 21px;color: #595959;font-size: 14px;vertical-align: text-top;
          }
          tr>th:first-child{
            max-width: 220px;
          }
          >tr>th:last-child{
            text-align: right;
          }
          .pointer{
            .colorYellow;text-decoration: underline;
            &:hover{
              cursor: pointer;
            }
          }
          .setting{
            >span,>a{
              display: inline-block;width: 100%;text-align: right;margin-top: 15px;
              &:first-child{
                margin-top: 0px;
              }
            }
          }
        }
      }
    }
  }
</style>
